import { VxeUI } from 'vxe-pc-ui';
import { ElLink, ElIcon, ElButton } from 'element-plus';
import { View } from '@element-plus/icons-vue';
import { h } from 'vue';

import VMdPreview from '@kangc/v-md-editor/lib/preview';

VxeUI.renderer.add('RaMdDialogRender', {
  renderDefault(renderOpts, params) {
    const { row, column } = params;
    const { props = {} } = renderOpts;
    const field = column.field;
    const richTextContent = row[field];

    const {
      dialogTitle = '详细信息',
      dialogWidth = '60%',
      emptyText = '-',
    } = props;

    if (!richTextContent) {
      return <span>{emptyText}</span>;
    }

    const handleShowDialog = () => {
      VxeUI.modal.open({
        title: dialogTitle,
        width: dialogWidth,
        height: '80%',
        mask: false,
        maskClosable: true,
        escClosable: true,
        showFooter: true,
        showConfirmButton: true,
        slots: {
          // 默认插槽，用于定义弹窗主体内容
          default: () =>
            h(VMdPreview, {
              text: richTextContent,
            }),
          footer: ({ $modal }) => [
            h(
              ElButton,
              {
                onClick: () => $modal.close(),
              },
              () => '关闭',
            ),
          ],
        },
      });
    };

    return (
      <ElLink
        type="primary"
        underline="never"
        onClick={handleShowDialog}
        style={{
          display: 'flex',
          alignItems: 'center',
          gap: '4px',
          cursor: 'pointer',
        }}
        {...props}
      >
        <ElIcon size={14}>
          <View />
        </ElIcon>
        <span>查看内容</span>
      </ElLink>
    );
  },
});

export default 'RaMdDialogRender';
